<template>
  <div class="row items">
    <div class="type row-data">
      <el-select
        class="select"
        v-model="option.fldEnname"
        size="mini"
        placeholder="请选择"
      >
        <el-option
          v-for="item in filedList"
          :key="item.colEn"
          :label="item.showName"
          :value="item.colEn"
          size="mini"
        >
        </el-option>
      </el-select>
    </div>
    <div class="cond row-data">
      <el-select
        class="select"
        v-model="option.condOper"
        size="mini"
        placeholder="请选择"
      >
        <el-option
          v-for="item in condData"
          :key="item.value"
          :label="item.name"
          :value="item.value"
          size="mini"
        >
        </el-option>
      </el-select>
    </div>
    <div class="va1 row-data">
      <el-input
        size="mini"
        v-model="option.value"
        placeholder="请输入内容"
      ></el-input>
    </div>
    <div class="va1 row-data typeData" v-if="option.condOper > 8">
      {{dataTypeVal}}
    </div>
    <div class="va1 row-data" v-if="option.condOper >= 8">
      <el-input
        size="mini"
        v-model="option.assist"
        placeholder="请输入内容"
      ></el-input>
    </div>
    <div class="operating">
      <el-row>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addNode(option.id, option.pid)"
                size="mini" style="    position: relative; top: -3px;">且</el-button>
        <a href="#" class="icon" @click="delNode(option.id, option.pid)" style="color: red; margin-left: 10px;">
          <i class="el-icon-circle-close"></i>
        </a>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Condition',
  props: ['option', 'filedList'],
  data () {
    return {
      typeVal: {},
      condVal: {},
      typeData2: [
        {
          name: '-',
          value: '9'
        },
        // {
        //   name: '<',
        //   value: '10'
        // },
        // {
        //   name: '<=',
        //   value: '11'
        // },
        {
          name: '-',
          value: '12'
        }
      ],
      dataTypeVal: '',
      condData: [
        {
          name: '=',
          value: '0'
        },
        {
          name: '>',
          value: '1'
        },
        {
          name: '<',
          value: '2'
        },
        {
          name: '>=',
          value: '3'
        },
        {
          name: '<=',
          value: '4'
        },
        {
          name: '!=',
          value: '5'
        },
        {
          name: 'like',
          value: '6'
        },
        {
          name: '包含',
          value: '7'
        },
        {
          name: '介于',
          value: '8'
        },
        {
          name: '开区间',
          value: '9'
        },
        // {
        //   name: '<=',
        //   value: '10'
        // },
        // {
        //   name: '<',
        //   value: '11'
        // },
        {
          name: '闭区间',
          value: '12'
        }
      ]
    }
  },
  methods: {
    addNode: function (id, pid) {
      this.$emit('makeNode', undefined, 'addChildren', id, pid)
    },
    delNode: function (id, pid) {
      this.$emit('makeNode', undefined, 'delNode', id, pid)
    },
    // 跟新查询条件
    updateNode (data) {
      debugger
      this.dataTypeVal = this.getText(data.condOper)
      debugger
      this.$emit('updateNodeCond', data)
    },
    getText (type) {
      debugger
      let arr = this.typeData2
      let result = arr.filter(v => {
        if (type === v.value) {
          return true
        }
      })
      debugger
      if (result.length > 0) {
        return result[0].name
      } else {
        return ''
      }
    }
  },
  watch: {
    // 条件修改时触发事件
    option: {
      handler (newVal, oldName) {
        debugger
        this.updateNode(newVal)
      },
      deep: true,
      immediate: false
    }
  }
}
</script>
<style lang="less" scoped>
.items {
  width: 100%;
  height: 35px;
  left: 20px;
  position: inherit;
}
.row-data {
  display: inline-block;
  width: 120px;
  margin-left: 8px;
  height: 100%;
  padding-top: 3.6px;
}
.operating {
  display: inline-block;
  width: 120px;
  margin-left: 8px;
}
.el-row {
  padding-top: 2.2px;
}
.icon {
  font-size: 1.5em;
}
.typeData {
  height: 28px;
  margin-top: 3.5px;
  border-radius: 4px;
  border: 1px solid #D1D5DB;
}
</style>
